class Validate {
   show(){
       console.log(this)
       
   }
   
    //查找元素方法
       /**
        * 查找元素方法
        * @param name string 元素选择器
        */
    query(name){
        return document.querySelector(name);
    }

    /**
        * 数据校验方法
        * @param password string 密码元素
        * @param confirmPassword string 确认密码
        * @param message string 失败时提醒的信息
        * @param errorEl string 显示错位消息的元素
        * @param eventType  触发时间
        */
        confirm(password,confirmPassword,message,errorEl,eventType){

        let elements = document.querySelectorAll(`[name="${password}"],[name="${confirmPassword}"]`);

        let This =this;
        // console.log(This,this)
        elements.forEach(function(elem){
            elem.addEventListener(`${eventType}`,function(){
            const passwordValue =This.query(`[name="${password}"]`).value;
            // console.log(passwordValue);
            const confirmValue =This.query(`[name="${confirmPassword}"]`).value;
            //console.log(confirmValue);
            if(passwordValue !=confirmValue){
                This.query(errorEl).innerHTML=message;
            }else{
                This.query(errorEl).innerHTML= '';
            }
        });
        });    
   }
        //用户名长度的检查方法（使用箭头函数方法）
        max(username,message,len,errorEl,eventType){
            // let This =this;
            this.query(`[name='${username}']`).addEventListener(`${eventType}`,()=>{
                const usernameLen= this.query(`[name='${username}']`).value;
                if(usernameLen.length > len){
                    this.query(errorEl).innerHTML=message;    
                }else{
                    this.query(errorEl).innerHTML='';
                }
            })

        }
}